<template>
  <div id="waterDataAnalysisMapContainer"></div>
</template>

<script>
export default {
  props: {
    mapConfig: {
      type: Object,
      default: () => {
        return {
          areaCode: null, // 查询区域编码
          areaName: '平桥区', // 查询区域
          areaLevel: 'district', // 查询等级
          subdistrict: 1, // 显示等级
          fillOpacity: 0.4, // 透明度
          FillColor: '#1426a1', // 区域填充色
          StrokeColor: '#1426a1', // 边界颜色
          center: [114.091104, 32.148489],
          pitch: 40, // 3D模式下倾斜度
          zoom: 10, // 缩放级别
          centerMasker: [114.091104, 32.148489], // 点位坐标
          mapStyle: 'amap://styles/8d5705fe9baf14eec73c1a9d60bfbaad', // 地图主题背景
          layerWallHeight: -8000, // 掩模高度
          layerWallColor: '#ccc', // 掩模高度面颜色
          xPanBy: 0, // 地图偏移 x轴
          yPanBy: 60, // 地图偏移 y周
        }
      }
    }
  },
  data () {
    return {
      AMapUI: null,
      AMap: null,
      map: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.AMapUI = window.AMapUI
      this.AMap = window.AMap
      this.loadDistrictExplorer()
    },
    loadDistrictExplorer () {
      let obj = this.mapConfig
      var opts = {
        subdistrict: obj.subdistrict,
        extensions: 'all',
        level: obj.areaLevel
      }
      var district = new AMap.DistrictSearch(opts)
      district.search(obj.areaName, function (status, result) {
        var bounds = result.districtList[0].boundaries
        var mask = []
        let polygons = []
        for (let i = 0; i < bounds.length; i += 1) {
          var polygon = new AMap.Polygon({
            strokeWeight: 1,
            path: bounds[i],
            fillOpacity: obj.fillOpacity,
            fillColor: obj.fillColor,
            strokeColor: obj.strokeColor
          })
          polygons.push(polygon)
          mask.push([bounds[i]])
        }
        m.map = new AMap.Map('waterDataAnalysisMapContainer', {
          mask: mask,
          center: obj.center,
          viewMode: '3D',
          labelzIndex: 9999,
          pitch: obj.pitch,
          zoom: obj.zoom
        })
        m.map.setMapStyle(obj.mapStyle) // 设置主题样式
        m.map.add(polygons)
        let maskerIn = new AMap.Marker({
          position: obj.centerMasker
        })
        m.map.add(maskerIn)
        // 添加高度面
        var object3Dlayer = new AMap.Object3DLayer({zIndex: 1})
        m.map.add(object3Dlayer)
        var height = obj.layerWallHeight
        var color = obj.layerWallColor
        var wall = new AMap.Object3D.Wall({
          path: bounds,
          height: height,
          color: color
        })
        wall.transparent = true
        object3Dlayer.add(wall)
        let x = obj.xPanBy
        let y = obj.yPanBy
        m.map.panBy(x, y) // 设置显示位置  偏移量 第一个参数 X 轴  第二参数 Y 轴
      })
    }
  }
}
</script>
